<template>
  <section class="sp-section sp-map">
    <!-- header -->
    <header class="sp-map__header">
      <!-- search -->
      <div class="sp-map__header-search">
        <el-input style="max-width: 230px;" placeholder="请输入点位编号" v-model="search.code">
          <el-button slot="append" icon="el-icon-search" @click="getSearchKeys"></el-button>
        </el-input>
        <el-dropdown>
          <el-button type="primary" class="sp-map__header-type">
            LBS<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="getSearchLbs(1000)">1公里</el-dropdown-item>
            <el-dropdown-item @click.native="getSearchLbs(2000)">2公里</el-dropdown-item>
            <el-dropdown-item @click.native="getSearchLbs(3000)">3公里</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="primary" class="sp-map__header-type" v-if="userInfo.role_id === 100">
          <a href="http://dw.tead.com.cn/api/billboard/export" style="color: #fff;">下载全部点位</a>
        </el-button>
        <el-button type="danger" @click="filterTags">筛选点位</el-button>
      </div>
      <!-- <div class="sp-map__header-tags">
        <div class="sp-map__header-address" style="width: 120px">
          <el-select v-model="search.classify" placeholder="请选择" style="max-width: 100%; width: 100%;" @change="getSearchAddress">
            <el-option v-for="item in searchKeywords" :key="item" :label="item" :value="item" />
          </el-select>
        </div>
        <template v-for="(item, $index) in searchTags">
          <el-tag class="sp-map__header-type" effect="plain" :type="item.color" :key="$index" @click="getSearchTags($index)">{{ item.label }}</el-tag>
        </template>
      </div> -->
    </header>
    <!-- map -->
    <div id="map"></div>
    <!-- <el-button icon="refresh" type="primary" class="refresh_button" @click="getRefreshMapData">刷新地图数据</el-button> -->
    <!-- detail -->
    <el-card class="map-content" v-if="markersInfo.id">
      <div class="map-content__close" @click="closeMarkersDetail">关闭</div>
      <div class="map-content__swiper">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(slide, index) in markersInfo.pics" :key="index">
            <img :src="slide.pic" alt="">
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="map-content__main">
        <div class="map-content__title">
          <h2>
            <img v-if="markersInfo.category_id === 1" src="../../assets/images/lump.png" alt="">
            <img v-if="markersInfo.category_id === 2" src="../../assets/images/houct.png" alt="">
            <img v-if="markersInfo.category_id === 3" src="../../assets/images/ship.png" alt="">
            <img v-if="markersInfo.category_id === 4" src="../../assets/images/fly.png" alt="">
            <span>{{ markersInfo.title }}</span>
          </h2>
          <div class="map-content__title-control">
            <el-tag>{{ markersInfo.rank_txt }}</el-tag>
            <el-tag type="warning" v-if="markersInfo.tags">{{ markersInfo.tags }}</el-tag>
            <!-- <span class="rank">{{ markersInfo.rank_txt }}</span> -->
            <!-- <span class="area" v-if="markersInfo.tags">{{ markersInfo.tags }}</span> -->
          </div>
        </div>
        <div class="map-content__info">
          <p>位置: {{ markersInfo.address }}</p>
          <p>编号: {{ markersInfo.code }}</p>
          <p>价格: ￥<strong>{{ markersInfo.price }}</strong>/月</p>
          <p v-if="classifyCate !== '7'">日曝光(人次): {{ markersInfo.show_num }}</p>
          <template>
            <!-- <p v-if="markersInfo.fields && markersInfo.fields.length">岗位形状: {{ markersInfo.name1 }}</p> -->
            <p v-if="markersInfo.fields && markersInfo.fields.length">场地类型: {{ markersInfo.name2 }}</p>
            <p v-if="markersInfo.fields && markersInfo.fields.length">组合编码: {{ markersInfo.name3 }}</p>
          </template>
        </div>
        <div class="map-content__button">
          <el-button type="primary" plain @click="addCheckListSingle">加入点位</el-button>
          <template v-if="Number(userInfo.role_id) === 100">
            <el-button :type="Number(markersInfo.status) === 1 ? 'primary' : Number(markersInfo.status) === 2 ? 'danger' : 'success'">{{ markersInfo.status | typeFilter }}</el-button>
          </template>
          <el-button v-else>{{ markersInfo.status | typeFilter }}</el-button>
        </div>
        <div class="map-content__control" v-if="Number(userInfo.role_id) === 100">
          <strong>到期时间: {{ markersInfo.end_at ? markersInfo.end_at : '暂无数据' }}</strong>
          <template v-if="markersInfo.customers && markersInfo.customers.length">
            <p>上画客户: {{ markersInfo.customers[0].name }}</p>
            <p>业务经理: {{ markersInfo.customers[0].partner }}</p>
          </template>
          <p v-if="markersInfo.pre_customer">预约客户: {{ markersInfo.pre_customer }}</p>
          <p v-if="markersInfo.pre_customer_date">预约时间: {{ markersInfo.pre_customer_date }}</p>
        </div>
      </div>
    </el-card>
    <!-- dialog -->
    <el-dialog :visible="classifyStatus" width="500px" title="选择点位类型">
      <el-form label-position="top" class="category__check">
        <el-form-item label="类型">
          <template v-for="(item, $index) in classify">
            <el-tag class="sp-map__header-type" :effect="item.checked ? 'dark' : 'plain'" type="primary" :key="$index" @click="setClassifyIndex($index)">{{ item.label }}</el-tag>
          </template>
        </el-form-item>
        <el-form-item label="状态">
          <template v-for="(item, $index) in searchTags">
            <el-tag class="sp-map__header-type" :effect="$index === searchTagsIndex ? 'dark' : 'plain'" :type="item.color" :key="$index" @click="setSearchIndex($index)">{{ item.label }}</el-tag>
          </template>
        </el-form-item>
        <el-form-item label="区域">
          <template v-for="(item, $index) in area">
            <el-tag class="sp-map__header-type" :effect="item.checked ? 'dark' : 'plain'" type="primary" :key="$index" @click="setAreaIndex($index)">{{ item.label }}</el-tag>
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="getRefreshMapData" style="float: left;">刷新地图数据</el-button>
        <el-button @click="classifyStatus = false">取 消</el-button>
        <el-button type="primary" @click="getFilterData">确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
// getPointByKeyword
import { getPointList, getPointDetail, getSearch, addCheckListSingle, getPointByKeyword, getCategory, getZone } from '@/api/map'
import { lazyAMapApiLoaderInstance } from 'vue-amap'

import 'swiper/swiper-bundle.css'
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

// icons
// const icon = require('../../../static/images/loc.png')
// const iconType1 = require('../../../static/images/icon/1.png')
// const iconType2 = require('../../../static/images/icon/2.png')
// const iconType3 = require('../../assets/images/icon/3.png')
// const iconType4 = require('../../assets/images/icon/4.png')
// const iconType5 = require('../../assets/images/icon/5.png')
// const iconType6 = require('../../assets/images/icon/6.png')
// const iconType7 = require('../../assets/images/icon/7.png')
// const iconType8 = require('../../assets/images/icon/8.png')
// const iconType11 = require('../../../static/images/icon2/11.png')
// const iconType22 = require('../../../static/images/icon2/22.png')
// const iconType33 = require('../../../static/images/icon2/33.png')
// const iconType44 = require('../../../static/images/icon2/44.png')
// const iconType55 = require('../../../static/images/icon2/55.png')
// const iconType66 = require('../../../static/images/icon2/66.png')
// const iconType77 = require('../../../static/images/icon2/77.png')
// const iconType88 = require('../../../static/images/icon2/88.png')
// const nlType1 = require('../../../static/images/icon/nl-kd.png')
// const nlType2 = require('../../../static/images/icon/nl-dd.png')
// const nlType3 = require('../../../static/images/icon/nl-bd.png')
// const nlType4 = require('../../../static/images/icon/nl-active.png')
// const dtType1 = require('../../../static/images/icon/dt-kd.png')
// const dtType2 = require('../../../static/images/icon/dt-dd.png')
// const dtType3 = require('../../../static/images/icon/dt-bd.png')
// const dtType4 = require('../../../static/images/icon/dt-active.png')

export default {
  name: 'MapIndex',
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data () {
    return {
      map: null,
      options: {
        zoom: 12,
        center: [118.111436, 24.471837],
        resizeEnable: true,
        mapStyle: 'amap://styles/50471cf997eaa81d3140f305ae3a7fae',
        features: ['bg', 'road', 'building', 'point']
      },
      classify: [],
      classifyIndex: null,
      classifyCate: null,
      classifyStatus: false,
      markers: [],
      // markersBats: [],
      markSearch: [],
      markersSingle: [],
      markGroup: [],
      // 详情
      markersInfo: {},
      userInfo: {
        role_id: 0
      },
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        }
      },
      search: {
        code: ''
      },
      searchTags: [
        { value: 4, label: '空点不定点', color: 'warning' },
        { value: 1, label: '空点', color: '' },
        { value: 2, label: '定点', color: 'danger' },
        { value: 3, label: '不定点', color: 'success' },
        { value: 0, label: '全部点位', color: 'info' }
      ],
      searchTagsIndex: 4,
      queryParams: {
        filter: '1'
      },
      searchKeywords: ['地铁一号线', '地铁二号线', '小学周边', '中学周边', '高端住宅周边', '繁华商圈周边'],
      isMenu: true,
      area: [],
      areaIndex: null
    }
  },
  created () {
    this.getArea()
    this.userInfo = JSON.parse(window.localStorage.getItem('userInfo')) || { role_id: 0 }
    this.$router.afterEach((to, from) => {
      this.isMenu = to.name !== 'share'
    })
  },
  mounted () {
    lazyAMapApiLoaderInstance.load().then(res => {
      console.log('res Amap', AMap)
      this.map = new AMap.Map('map', this.options)
    })
    // this.getCategory()
    // this.search.code
    // const searchStr = window.location.hash ? window.location.hash.split('?') : []
    // console.log('searchStr', searchStr)
    // if (searchStr && searchStr[1]) {
    //   this.search.code = decodeURI(searchStr[1].split('=')[1])
    //   this.$nextTick(() => {
    //     this.getSearchLbs()
    //   })
    // }
    // 2021年03月25日14:29:28 离线存储相关
    // 是否需要获取全部点位
    const refreshMarkers = window.localStorage.getItem('refreshMarkers')
    if (refreshMarkers !== '1') {
      this.getCategory()
    } else {
      this.classify = JSON.parse(window.localStorage.getItem('classify'))
    }
    this.classifyStatus = true
  },
  destroyed () {
    this.map = null
    this.marker = null
  },
  methods: {
    // 获取地区
    async getArea () {
      const { data } = await getZone()
      console.log('area', data)
      this.area = data.map(item => {
        return { label: item.name, value: item.id + '', checked: false }
      })
      this.area.push({ label: '全部区域', value: 0, checked: true })
    },
    setAreaIndex (index) {
      this.areaIndex = index
      this.area[index].checked = !this.area[index].checked
      console.log(index, this.area.length)
      if (index !== this.area.length - 1) {
        this.area[this.area.length - 1].checked = false
      } else {
        this.area.forEach(item => {
          item.checked = false
        })
        this.area[index].checked = true
      }
    },
    setSearchIndex (index) {
      this.searchTagsIndex = index
    },
    setClassifyIndex (index) {
      this.classifyCate = index
      this.classify[index].checked = !this.classify[index].checked
    },
    // 获取分类
    async getCategory () {
      const { data } = await getCategory()
      this.classify = data.map(item => ({ value: item.id + '', label: item.name, checked: false })).filter(item => item.label !== '厦航' && item.label !== '邮轮中心')
      this.classify.forEach((item, $index) => {
        if (item.label === '站名牌') {
          this.classify[0].value = this.classify[0].value + ',' + item.value
          this.classify.splice($index, 1)
        }
      })
      this.classify.forEach((item, $index) => {
        if (item.label === '候车亭小牌') {
          this.classify[0].value = this.classify[0].value + ',' + item.value
          this.classify.splice($index, 1)
        }
      })
      this.getAllPointDataFromAllCate()
      window.localStorage.setItem('classify', JSON.stringify(this.classify))
    },
    // 获取全部点位数据
    async getAllPointDataFromAllCate () {
      const cate = this.classify.map(item => item.value).join(',')
      const params = {
        ...this.queryParams,
        cate_id: cate
      }
      params.company_id = this.userInfo.company_id || 1
      if (params.company_id === 1 || params.company_id === '1') {
        delete params.company_id
      }
      const { status, data } = await getPointList(params)
      if (status) {
        const marker = data.data.filter(item => item.lnglat && item.lnglat !== 'undefined,undefined')
        window.localStorage.setItem('markers', JSON.stringify(marker))
        window.localStorage.setItem('refreshMarkers', '1')
      } else {
        window.localStorage.setItem('refreshMarkers', '0')
      }
      this.$notification.success({
        message: '点位数据已刷新，请选择筛选条件查看点位地图。'
      })
    },
    // 刷新地图数据
    getRefreshMapData () {
      this.getCategory()
    },
    getFieldsItem (data, val) {
      if (!data) {
        return '暂无'
      }
      const array = data.filter(item => item.name === val)
      console.log('array', array)
      return array && array.length ? array[0].val : '暂无'
    },
    // 根据筛选条件向地图上添加点位
    getFilterData () {
      const cate = this.classify.filter(item => item.checked).map(item => item.value).join(',')
      // console.log('getInitData classify', cate)
      // 先根据分类获取需要的数据
      const markers = JSON.parse(window.localStorage.getItem('markers'))
      // console.log(markers.filter(item => item.category_id > 8))
      const canUsedCateMarkers = markers.filter(item => cate.indexOf(item.category_id) > -1)
      // console.log('canUsedCateMarkers', canUsedCateMarkers)
      // 在根据状态筛选出符合要求的点位
      // tags = 4的时候是1 3
      const tags = this.searchTags[this.searchTagsIndex].value === 4 ? '1,3' : this.searchTags[this.searchTagsIndex].value + ''
      console.log(tags)
      // if (tags === 0) {}
      const area = this.area.filter(item => item.checked && item.label !== '全部区域').map(item => item.label).join(',')
      const canUsedStatusMarkers = canUsedCateMarkers.filter(item => tags === '0' ? item : tags.indexOf(item.status) > -1).filter(item => area ? area.indexOf(item.zone_name) > -1 : item)
      // console.log('区域', area)
      // if (area) {
      //   canUsedStatusMarkers = canUsedStatusMarkers.filter(item => area.indexOf(item.zone_name) > -1)
      // }
      if (canUsedStatusMarkers && canUsedStatusMarkers.length) {
        this.markers = canUsedStatusMarkers.map(item => {
          const lnglat = item.lnglat && item.lnglat.split(',')
          return new AMap.Text({
            text: item.code,
            anchor: 'center', // 设置文本标记锚点
            // eslint-disable-next-line
            style: {
              width: '15px',
              height: '15px',
              background: this.getIconColor(item.status)
            },
            position: [lnglat[0], lnglat[1]],
            category_id: item.category_id,
            id: item.id,
            code: item.code
          })
        })
        this.markers.forEach(item => {
          item.on('click', (e) => {
            this.map.remove(this.markersSingle)
            this.map.remove(this.markSearch)
            // this.markersSingle = []
            this.markersSingle = [new AMap.Text({
              text: item.w.code,
              anchor: 'center', // 设置文本标记锚点
              // eslint-disable-next-line
              style: {
                width: '15px',
                height: '15px',
                background: this.getActiveIconColor()
              },
              // icon: this.getActiveIcons(item.w.category_id),
              position: [item.w.position.lng, item.w.position.lat],
              category_id: item.w.category_id,
              id: item.w.id,
              code: item.w.code
            })]
            this.map.add(this.markersSingle)
            this.getMarkerInfo(item.w.id)
          })
        })
        this.map.add(this.markers)
        // this.markersBats = cloneDeep(this.markers)
        this.classifyStatus = false
      }
    },
    filterTags () {
      this.map.remove(this.markers)
      this.markers = []
      console.log('this.markers', this.markers)
      this.classifyStatus = true
    },
    // 初始化地图并获取全部所需数据
    getInitData () {
      Promise.all([this.getPointData()]).then(res => {
        console.log(res)
      }).finally(() => {
        this.markers.forEach(item => {
          item.on('click', (e) => {
            this.map.remove(this.markersSingle)
            this.map.remove(this.markSearch)
            // this.markersSingle = []
            this.markersSingle = [new AMap.Text({
              text: item.w.code,
              anchor: 'center', // 设置文本标记锚点
              // eslint-disable-next-line
              style: {
                width: '15px',
                height: '15px',
                background: this.getActiveIconColor()
              },
              // icon: this.getActiveIcons(item.w.category_id),
              position: [item.w.position.lng, item.w.position.lat],
              category_id: item.w.category_id,
              id: item.w.id,
              code: item.w.code
            })]
            this.map.add(this.markersSingle)
            this.getMarkerInfo(item.w.id)
          })
        })
        this.map.add(this.markers)
        // this.markersBats = cloneDeep(this.markers)
        this.classifyStatus = false
      })
    },
    // 获取颜色
    getIconColor (status) {
      return status === 1 ? '#409eff' : status === 2 ? '#f56c6c' : '#67c23a'
    },
    getActiveIconColor () {
      return '#e6a23c'
    },
    // 获取全部点位信息
    async getPointData () {
      // this.markers = []
      // this.map.remove(this.markers)
      const tags = this.searchTags[this.searchTagsIndex].value
      const cate = this.classify.filter(item => item.checked).map(item => item.value).join(',')
      // const cate = this.classify.map(item => item.value).join(',')
      if (tags !== null && cate) {
        const params = {
          ...this.queryParams,
          status: tags,
          cate_id: cate
        }
        if (params.status === 0) {
          delete params.status
        }
        if (params.status === 4) {
          params.status = '1, 3'
        }
        // console.log('getPointData', params)
        params.company_id = this.userInfo.company_id || 1
        if (params.company_id === 1 || params.company_id === '1') {
          delete params.company_id
        }
        const { status, data } = await getPointList(params)
        status && (this.markers = this.markers.concat(data.data.filter(item => item.lnglat && item.lnglat !== 'undefined,undefined').map((item, $index) => {
          const lnglat = item.lnglat && item.lnglat.split(',')
          return new AMap.Text({
            text: item.code,
            anchor: 'center', // 设置文本标记锚点
            // eslint-disable-next-line
            style: {
              width: '15px',
              height: '15px',
              background: this.getIconColor(item.status)
            },
            position: [lnglat[0], lnglat[1]],
            category_id: item.category_id,
            id: item.id,
            code: item.code
          })
        })))
      } else {
        this.$notification.error({
          message: '未选择筛选条件'
        })
      }
    },
    // 根据预设字段搜索点位
    async getSearchAddress (e) {
      // console.log(e)
      const { data } = await getPointByKeyword(e)
      console.log('data', data)
      this.setSearchPoints(data)
    },
    setSearchPoints (data) {
      if (data && data.length) {
        this.map.remove(this.markers)
        this.markers = data.map(item => {
          const lnglat = item.lnglat && item.lnglat.split(',')
          // return new AMap.Marker({
          //   icon: this.getIcons(item.category_id, item.status),
          //   position: [lnglat[0], lnglat[1]],
          //   width: '25px',
          //   height: '25px',
          //   category_id: item.category_id,
          //   id: item.id,
          //   code: item.code
          // })
          return new AMap.Text({
            text: item.code,
            anchor: 'center', // 设置文本标记锚点
            // eslint-disable-next-line
            style: {
              width: '15px',
              height: '15px',
              background: this.getIconColor(item.status)
            },
            // icon: this.getIcons(item.category_id, item.status),
            position: [lnglat[0], lnglat[1]],
            // width: '25px',
            // height: '25px',
            category_id: item.category_id,
            id: item.id,
            code: item.code
          })
        }).map(item => {
          // console.log('forEach', item)
          item.on('click', (e) => {
            // this.markersSingle = [new AMap.Marker({
            //   icon: this.getActiveIcons(item.w.category_id),
            //   position: [item.w.position.lng, item.w.position.lat],
            //   width: item.w.width,
            //   height: item.w.height,
            //   category_id: item.w.category_id,
            //   id: item.w.id,
            //   code: item.w.code
            // })]
            this.markersSingle = [new AMap.Text({
              text: item.w.code,
              anchor: 'center', // 设置文本标记锚点
              // eslint-disable-next-line
              style: {
                width: '15px',
                height: '15px',
                background: this.getActiveIconColor()
              },
              position: [item.w.position.lng, item.w.position.lat],
              category_id: item.w.category_id,
              id: item.w.id,
              code: item.w.code
            })]
            this.map.add(this.markersSingle)
            this.getMarkerInfo(item.w.id)
          })
          return item
        })
        console.log('map.add.markers', this.markers)
        this.map.add(this.markers)
      }
    },
    // 根据中文搜索区域
    getSearchLbs (radius = 1500) {
      console.log('getSearchLbs', radius)
      if (this.search.code === '') {
        this.$notification.error({
          message: 'LBS搜索内容不能为空且必须是中文'
        })
        return false
      }
      AMap.plugin('AMap.PlaceSearch', () => {
        const autoOptions = {
          city: '厦门'
        }
        const placeSearch = new AMap.PlaceSearch(autoOptions)
        placeSearch.search(this.search.code, (status, result) => {
          console.log('placeSearch', status, result)
          const circle = new AMap.Circle({
            map: this.map,
            center: [result.poiList.pois[0].location.lng, result.poiList.pois[0].location.lat],
            radius,
            strokeColor: '#3366FF',
            strokeOpacity: 0.3,
            strokeWeight: 3,
            fillColor: '#FFA500',
            fillOpacity: 0.35,
            draggable: false
          })
          window.sessionStorage.setItem('circle', circle)
          this.map.setCenter([result.poiList.pois[0].location.lng, result.poiList.pois[0].location.lat])
          this.map.setZoom(15)
          this.map.add(circle)
        })
      })
    },
    // 校验搜索值的格式
    formatSearchValue () {
      return /.*[\u4e00-\u9fa5]+.*$/.test(this.search.code)
    },
    // 根据code搜索点位
    async getSearchKeys () {
      if (this.formatSearchValue()) {
        this.$notification.error({
          message: '点位不能包含中文'
        })
        return false
      }
      const { data, status } = await getSearch(this.search)
      console.log('getSearchKeys', data)
      if (!status) {
        this.$notification.error({
          message: '查询失败'
        })
      } else {
        this.markersInfo = data
        this.markersInfo.pics = this.markersInfo.pics.filter(item => item.pic).map((item, $index) => {
          console.log('info-------------start')
          console.log(item.pic)
          console.log(item.pic.indexOf('/uploads'), item.pic.indexOf('/uploads') === 0)
          if (item.pic.indexOf('/uploads') === 0 || item.pic.indexOf('/storage') === 0) {
            item.pic = 'http://dw.tead.com.cn' + item.pic
          }
          console.log(item.pic)
          return item
        })
        const marker = new AMap.Text({
          text: this.markersInfo.code,
          anchor: 'center', // 设置文本标记锚点
          // eslint-disable-next-line
          style: {
            width: '15px',
            height: '15px',
            background: this.getActiveIconColor()
          },
          // icon: this.getActiveIcons(data.category_id),
          position: [data.lnglat.split(',')[0], data.lnglat.split(',')[1]],
          id: this.markersInfo.id,
          code: this.markersInfo.code
        })
        this.markSearch.push(marker)
        this.map.setCenter(data.lnglat.split(','))
        this.map.setZoom(15)
        this.map.add(this.markSearch)
      }
    },
    // 根据点位类型获取点位
    getSearchTags (index) {
      // this.queryParams.status = value === 4 ? '1, 3' : value
      this.searchTagsIndex = index
      this.map.remove(this.markers)
      this.markers = []
      this.getInitData()
    },
    // 序列化icon 登录与否决定使用的icon样式
    // getIcons (category, status) {
    //   const token = window.localStorage.getItem('token')
    //   let icon = iconType4
    //   if (category === 1 || category === 5 || category === 6) {
    //     if (token) {
    //       status === 1 && (icon = iconType4)
    //       status === 2 && (icon = iconType8)
    //       status === 3 && (icon = iconType6)
    //     } else {
    //       icon = iconType4
    //     }
    //   } else if (category === 2) {
    //     if (token) {
    //       status === 1 && (icon = iconType3)
    //       status === 2 && (icon = iconType7)
    //       status === 3 && (icon = iconType5)
    //     } else {
    //       icon = iconType3
    //     }
    //   } else if (category === 3) {
    //     if (token) {
    //       status === 1 && (icon = iconType44)
    //       status === 2 && (icon = iconType88)
    //       status === 3 && (icon = iconType66)
    //     } else {
    //       icon = iconType44
    //     }
    //   } else if (category === 4) {
    //     if (token) {
    //       status === 1 && (icon = iconType33)
    //       status === 2 && (icon = iconType77)
    //       status === 3 && (icon = iconType55)
    //     } else {
    //       icon = iconType33
    //     }
    //   } else if (category === 7) {
    //     if (token) {
    //       status === 1 && (icon = nlType1)
    //       status === 2 && (icon = nlType2)
    //       status === 3 && (icon = nlType3)
    //     } else {
    //       icon = nlType1
    //     }
    //   } else if (category === 8) {
    //     if (token) {
    //       status === 1 && (icon = dtType1)
    //       status === 2 && (icon = dtType2)
    //       status === 3 && (icon = dtType3)
    //     } else {
    //       icon = nlType1
    //     }
    //   } else {
    //     icon = iconType3
    //   }
    //   return icon
    // },
    // getActiveIcons (category) {
    //   let icon = null
    //   if (category === 1 || category === 5 || category === 6) {
    //     icon = iconType2
    //   } else if (category === 2) {
    //     icon = iconType1
    //   } else if (category === 3) {
    //     icon = iconType22
    //   } else if (category === 4) {
    //     icon = iconType11
    //   } else if (category === 7) {
    //     icon = nlType4
    //   } else if (category === 8) {
    //     icon = dtType4
    //   }
    //   return icon
    // },
    // 关闭点位信息详情
    closeMarkersDetail () {
      this.markersInfo = {}
      this.map.remove(this.markSingle)
    },
    // 获取点位详情
    async getMarkerInfo (id) {
      const { data } = await getPointDetail({ id })
      this.markersInfo = data
      console.log(this.markersInfo.pics)
      this.markersInfo.pics = this.markersInfo.pics.filter(item => item.pic).map((item, $index) => {
        console.log('info-------------start')
        console.log(item.pic)
        console.log(item.pic.indexOf('/uploads'), item.pic.indexOf('/uploads') === 0)
        if (item.pic.indexOf('/uploads') === 0 || item.pic.indexOf('/storage') === 0) {
          item.pic = 'http://dw.tead.com.cn' + item.pic
        }
        console.log(item.pic)
        return item
      })
      this.markersInfo.name1 = this.getFieldsItem(this.markersInfo.fields, '岗位形状')
      this.markersInfo.name2 = this.getFieldsItem(this.markersInfo.fields, '场地类型')
      this.markersInfo.name3 = this.getFieldsItem(this.markersInfo.fields, '组合编码')
    },
    async addCheckListSingle () {
      const { status } = await addCheckListSingle({ billboard_id: this.markersInfo.id })
      this.$notification[status ? 'success' : 'error']({
        message: status ? '新增成功' : '操作失败'
      })
      console.log(this.markersInfo)
      this.$parent.$children[0].$children[0].getLists()
      this.$parent.$children[0].$children[0].getCheckList()
      const marker = new AMap.Text({
        // icon: this.getActiveIcons(this.markersInfo.category_id),
        text: this.markersInfo.code,
        anchor: 'center', // 设置文本标记锚点
        // eslint-disable-next-line
        style: {
          width: '15px',
          height: '15px',
          background: this.getActiveIconColor(this.markersInfo.status)
        },
        position: [this.markersInfo.lnglat.split(',')[0], this.markersInfo.lnglat.split(',')[1]],
        id: this.markersInfo.id,
        code: this.markersInfo.code
      })
      this.markGroup.push(marker)
      this.map.add(this.markGroup)
    }
  },
  filters: {
    typeFilter (val) {
      return Number(val) === 1 ? '空点' : (Number(val) === 2 ? '定点' : '不定点')
    }
  }
}
</script>

<style>
.amap-overlay-text-container {
  border-radius: 50%;
  border: 0;
  padding: 0;
  font-size: 0;
}
</style>

<style lang="scss" scoped>
  .refresh_button {
    position: fixed;
    bottom: 30px;
    right: 30px;
  }
  .sp-map {
    position: relative;
    height: 100%;
    padding: 0;
    box-sizing: border-box;

    #map {
      width: 100%;
      height: 100%;
    }

    &__ {

      &container {
        width: 100%;
        height: 100%;
      }

      &header {
        position: absolute;
        top: -60px;
        left: 0;
        right: 200px;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;

        &- {
          &search ,
          &tags {
            display: flex;
            align-items: center;
          }

          &type {
            cursor: pointer;
            margin-left: 10px;
          }
        }
      }
    }
  }

  .map-content {
    position: absolute;
    top: 120px;
    left: 120px;
    width: 350px;
    min-height: 420px;
    z-index: 2;
    background: #fff;
    border-radius: 5px;
    // box-shadow: 0 0 4px 5px rgba(0, 0, 0, .1);

    ::v-deep .el-card__body {
      padding: 0;
    }

    &__ {

      &close {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 11;
        cursor: pointer;
        padding: 5px 15px;
        background: rgba(255, 255, 255, .5);
        font-size: 14px;
        color: #000;
      }
      &swiper {
        height: 235px;

        img {
          width: 100%;
          height: 235px;
        }
      }

      &main {
        padding: 0 15px;
        // height: 355px;
      }

      &title {
        height: 82px;
        border-bottom: 1px dashed #ababab;
        overflow: hidden;

        h2 {
          display: flex;
          height: 20px;
          margin: 18px 0 9px;
          font-size: 16px;
          color: #333;

          // img, span {
          //   display: inline-block;
          // }

          img {
            margin-right: 15px;
          }

          span {
            display: block;
            flex: 1;
            width: auto;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        &-control {
          // padding: 0 15px;

          ::v-deep .el-tag {
            margin-right: 10px;
          }
          // span {
          //   display: inline-block;
          //   vertical-align: top;
          //   height: 20px;
          //   font-size: 12px;
          //   border-radius: 10px;
          //   color: #fff;
          //   margin: 0 5px;
          //   text-align: center;
          // }

          // .rank {
          //   width: 55px;
          //   background: #46d3ca;
          // }

          // .area {
          //   padding: 0 10px;
          //   background: #ffa453;
          // }
        }
      }

      &info {
        font-size: 12px;
        padding: 6px 0;
        border-bottom: 1px dashed #ababab;

        p {
          font-size: 12px;
          margin: 0;
          line-height: 2;
        }
      }

      &button {
        display: flex;
        align-items: center;
        padding: 12px 0;

        ::v-deep .el-button {
          flex: 1;
        }

        a {
          flex: 1;
          display: block;
          height: 32px;
          line-height: 32px;
          color: #fff;
          font-size: 16px;
          text-align: center;

          &:first-child {
            margin-right: 10px;
          }

          &.join {
            background: #ffa453;
          }

          &.status {
            background: #46d3ca;

            &.status1 {
              background: #455bab;
            }
            &.status2 {
              background: #c600ff;
            }
            &.status3 {
              background: #048a20;
            }
          }
        }
      }

      &control {
        strong {
          display: block;
          height: 30px;
          line-height: 30px;
          padding: 0 10px;
          background: #f2f2f2;
          color: #333;
          font-weight: normal;
          margin-bottom: 7px;
        }

        p {
          margin: 0;
          line-height: 24px;
        }
      }
    }
  }
</style>
